<template>
    <div class="Father">
        <Child :game="games">
            <!-- 命名s2 -->
            <template v-slot:s2>
            <!-- 默认效果 -->
            <ul>
                <li v-for="g in games">{{ g.gameName }}</li>
            </ul>
            </template>
            <!-- 命名s1 #s1和v-slot:s1具有一样的效果 -->
            <template #s1>
                <h1>游戏列表</h1>
            </template>
        </Child>
    </div>
    </template>
    
    <script lang="ts">
    export default {
    name:'Father'
    }
    </script>
    
    <script setup lang="ts">
import { inject, provide, reactive, ref, toRef } from 'vue';
    import Child from './Child.vue';

    let games = [
        {id:1,gameName:'游戏1'},
        { id: 2, gameName: '游戏2' },
        {id:3,gameName:'游戏3'}
    ]

    </script>
    
    <style lang="css">
    .Father{
        display: flex;
        margin: 20px;
        height: 600px;
        width: 800px;
        background-color:aqua;
    }
    .childImg{
        /*height: 100%;*/
        width: 100%;
    }

    </style>